
<div class="mt-section mb-6 mb-xl-0">
  <div class="container px-0 px-md-4">
    <div class="bg-white">
      <div class="flex-column-reverse flex-md-row row g-0">
        <div class="col-12 col-md-6 px-4 px-md-2">
          <div class="d-flex align-items-center h-100 text-md-start justify-content-md-start text-start justify-content-start">
            {%- assign number_blocks = section.blocks | where: "type", "number-items" -%}
            <div class="text-content mx-auto mw-text-3">
              <div class="">
                {%- if section.settings.heading != empty -%}
                  <h4 class="h2 fw-bold mb-3">{{ section.settings.heading }}</h4>
                {%- endif -%}
                {%- if section.settings.text != empty -%}
                  <div class="gray-700 fw-normal mb-2 no-last-margin richtext-with-link">
                    {{ section.settings.text }}
                  </div>
                {%- endif -%}
              </div>
              {%- if number_blocks.size > 0 -%}
                <div class="mt-5 mt-lg-6 mb-0">
                  <div class="row g-3 g-lg-4 row-cols-lg-2 row-cols-md-2 row-cols-2">
                    {%- for block in number_blocks -%}
                      <div class="col">
                        {%- if block.settings.title != empty -%}
                          <p class="mb-0 h2 text-primary">{{ block.settings.title }}</p>
                        {%- endif -%}
                        {%- if block.settings.text != empty -%}
                          <p class="gray-700 mb-0">{{ block.settings.text }}</p>
                        {%- endif -%}
                      </div>
                    {%- endfor -%}
                  </div>
                </div>
              {%- endif -%}
            </div>
          </div>
        </div>
        <div class="mt-5 mt-md-0 col-12 col-md-6 d-flex align-items-center justify-content-center">
          <div class="d-flex align-items-center ratio ratio-1x1 as-parallax-wrap">
            {%- if section.settings.mobile_image != nil -%}
              <div class="as-parallax-list position-relative ratio d-md-none d-block"
                style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.mobile_image.aspect_ratio | times: 100 }}%;">
                {{ section.settings.mobile_image | image_url: width: section.settings.mobile_image.width | image_tag: loading: 'lazy', class: 'rounded-2' }}
              </div>
            {%- endif -%}
            <div class="d-none d-md-block">
              {%- if section.settings.design_image != nil -%}
                <div
                  class="start-0 bottom-0 position-absolute ratio design-image as-design-image as-parallax-list"
                  data-start="0.2"
                  data-end="-.5"
                  style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.design_image.aspect_ratio | times: 100 }}%;">
                  {{ section.settings.design_image | image_url: width: section.settings.design_image.width | image_tag: loading: 'lazy', class: 'rounded-2' }}
                </div>
              {%- endif -%}
              {%- if section.settings.tech_image != nil -%}
                <div
                  class="end-0 position-absolute ratio tech-image as-tech-image as-parallax-list"
                  data-start="5"
                  data-end="0"
                  style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.tech_image.aspect_ratio | times: 100 }}%;">
                  {{ section.settings.tech_image | image_url: width: section.settings.tech_image.width | image_tag: loading: 'lazy', class: 'rounded-2' }}
                </div>
              {%- endif -%}
              {%- if section.settings.logo_image != nil -%}
                <div
                  class="start-0 bottom-0 position-absolute ratio logo-image as-logo-image as-parallax-list"
                  data-start="4.5"
                  data-end="0"
                  style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.logo_image.aspect_ratio | times: 100 }}%;">
                  {{ section.settings.logo_image | image_url: width: section.settings.logo_image.width | image_tag: loading: 'lazy', class: 'rounded-2' }}
                </div>
              {%- endif -%}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Teasing image with number",
    "class": "image-with-number-items",
    "tag": "section",
    "settings": [
      {
        "type":"header",
        "content":"Desktop image"
      },
      {
        "label": "Tech Image",
        "type": "image_picker",
        "id": "tech_image"
      },
      {
        "label": "Logo Image",
        "type": "image_picker",
        "id": "logo_image"
      },
      {
        "label": "Design Image",
        "type": "image_picker",
        "id": "design_image"
      },
      {
        "type":"header",
        "content":"Mobile image"
      },
      {
        "label": "Image",
        "type": "image_picker",
        "id": "mobile_image"
      },
      {
        "type": "text",
        "id": "heading",
        "default": "Talk about your brand",
        "label": "Heading"
      }, {
        "type": "richtext",
        "id": "text",
        "default": "<p>Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.</p>",
        "label": "Text"
      }
    ],
    "blocks": [
      {
        "type": "number-items",
        "name": "Number items",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Numbers"
          }, {
            "type": "text",
            "id": "text",
            "default": "Text",
            "label": "Text"
          }
        ]
      }
    ]
  }
{% endschema %}
